import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Card, Button, Typography, Space, Divider, Alert, Spin } from 'antd';
import {
  WalletOutlined,
  CrownOutlined,
  SafetyOutlined,
  TeamOutlined,
  RocketOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';

import { useWallet } from '../contexts/WalletContext';

const { Title, Text, Paragraph } = Typography;

const ConnectWallet = () => {
  const [referralCode, setReferralCode] = useState('');
  const { isConnecting, connectWallet } = useWallet();

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const ref = urlParams.get('ref');
    if (ref) {
      setReferralCode(ref);
    }
  }, []);

  const features = [
    {
      icon: <SafetyOutlined className="text-2xl text-blue-600" />,
      title: 'Secure Staking',
      description: 'Your tokens are secured by smart contracts on the Binance Smart Chain'
    },
    {
      icon: <RocketOutlined className="text-2xl text-green-600" />,
      title: 'Daily Rewards',
      description: 'Earn 1% daily interest on your staked tokens'
    },
    {
      icon: <TeamOutlined className="text-2xl text-purple-600" />,
      title: 'Referral Program',
      description: 'Earn 10% rewards from your direct referrals'
    },
    {
      icon: <CrownOutlined className="text-2xl text-yellow-600" />,
      title: 'Premium Features',
      description: 'Advanced staking options and priority support'
    }
  ];

  const steps = [
    {
      number: '1',
      title: 'Connect Wallet',
      description: 'Connect your MetaMask or other Web3 wallet'
    },
    {
      number: '2',
      title: 'Set Password',
      description: 'Create a secure password for your account'
    },
    {
      number: '3',
      title: 'Start Staking',
      description: 'Deposit GOD tokens and start earning rewards'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="flex justify-center mb-6">
            <div className="p-4 bg-blue-600 rounded-full">
              <CrownOutlined className="text-4xl text-white" />
            </div>
          </div>
          <Title level={1} className="text-4xl font-bold text-gray-900 mb-4">
            God Token Staking System
          </Title>
          <Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
            Earn daily rewards by staking your GOD tokens on the Binance Smart Chain.
            Join our community and benefit from the referral program.
          </Paragraph>

          {referralCode && (
            <Alert
              message="Referral Code Applied"
              description={`You're registering with referral code: ${referralCode}`}
              type="success"
              showIcon
              className="max-w-md mx-auto mt-4"
            />
          )}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Connect Card */}
          <div className="lg:col-span-2">
            <Card className="shadow-lg border-0">
              <div className="text-center mb-8">
                <Title level={2} className="text-2xl font-bold text-gray-900 mb-4">
                  Get Started Now
                </Title>
                <Paragraph className="text-gray-600">
                  Connect your wallet to begin staking and earning rewards
                </Paragraph>
              </div>

              {/* How It Works */}
              <div className="mb-8">
                <Title level={4} className="text-lg font-semibold text-gray-900 mb-6">
                  How It Works
                </Title>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {steps.map((step, index) => (
                    <div key={index} className="text-center">
                      <div className="flex justify-center mb-4">
                        <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
                          <span className="text-white font-bold">{step.number}</span>
                        </div>
                      </div>
                      <Title level={5} className="font-semibold text-gray-900 mb-2">
                        {step.title}
                      </Title>
                      <Text className="text-gray-600 text-sm">{step.description}</Text>
                    </div>
                  ))}
                </div>
              </div>

              <Divider />

              {/* Connect Button */}
              <div className="text-center">
                <Button
                  type="primary"
                  size="large"
                  icon={<WalletOutlined />}
                  loading={isConnecting}
                  onClick={connectWallet}
                  className="h-12 px-8 text-lg bg-blue-600 hover:bg-blue-700 border-0"
                >
                  {isConnecting ? 'Connecting...' : 'Connect Wallet'}
                </Button>

                <div className="mt-6">
                  <Text className="text-gray-500 text-sm">
                    By connecting your wallet, you agree to our Terms of Service and Privacy Policy
                  </Text>
                </div>
              </div>

              {/* Supported Wallets */}
              <div className="mt-8 pt-8 border-t border-gray-200">
                <Title level={5} className="text-center text-gray-900 mb-4">
                  Supported Wallets
                </Title>
                <div className="flex justify-center space-x-4">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-orange-100 rounded-lg flex items-center justify-center mb-2">
                      <Text className="text-orange-600 font-bold">MM</Text>
                    </div>
                    <Text className="text-sm text-gray-600">MetaMask</Text>
                  </div>
                  <div className="text-center">
                    <div className="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-2">
                      <Text className="text-blue-600 font-bold">WC</Text>
                    </div>
                    <Text className="text-sm text-gray-600">WalletConnect</Text>
                  </div>
                </div>
              </div>
            </Card>
          </div>

          {/* Features Sidebar */}
          <div className="space-y-6">
            <Card title="Key Features" className="shadow-lg border-0">
              <div className="space-y-6">
                {features.map((feature, index) => (
                  <div key={index} className="flex space-x-4">
                    <div className="flex-shrink-0">
                      {feature.icon}
                    </div>
                    <div>
                      <Title level={5} className="font-semibold text-gray-900 mb-1">
                        {feature.title}
                      </Title>
                      <Text className="text-gray-600 text-sm">{feature.description}</Text>
                    </div>
                  </div>
                ))}
              </div>
            </Card>

            <Card title="Token Stats" className="shadow-lg border-0">
              <div className="space-y-4">
                <div className="flex justify-between">
                  <Text className="text-gray-600">Daily Interest</Text>
                  <Text className="font-semibold text-green-600">1%</Text>
                </div>
                <div className="flex justify-between">
                  <Text className="text-gray-600">Referral Reward</Text>
                  <Text className="font-semibold text-blue-600">10%</Text>
                </div>
                <div className="flex justify-between">
                  <Text className="text-gray-600">Claim Deadline</Text>
                  <Text className="font-semibold text-yellow-600">1 Hour</Text>
                </div>
                <div className="flex justify-between">
                  <Text className="text-gray-600">Network</Text>
                  <Text className="font-semibold text-purple-600">BSC</Text>
                </div>
              </div>
            </Card>

            <Card className="bg-gradient-to-r from-blue-600 to-indigo-600 border-0 text-white">
              <div className="text-center">
                <CheckCircleOutlined className="text-4xl mb-4" />
                <Title level={4} className="text-white mb-2">
                  Ready to Start Earning?
                </Title>
                <Text className="text-blue-100">
                  Join thousands of users already earning rewards with God Token
                </Text>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConnectWallet;